<template>
  <div class="main">
    <van-sticky>
      <div class="nav" v-if="!user">
        <img class="back" :src="back" alt="" @click="handleBack"/>
        <img class="share" :src="share" alt="" @click="handleShare"/>
      </div>
      <div class="navBar" v-if="user">
        <div class="navBar-left">
          <img :src="back" alt="" @click="handleBack" class="back">
          <!--          :src="store.state.imgUrl + dataList.avatar"-->
          <!-- <van-image
          style="border:1px solid #fff"
              width="30"
              height="30"
              round
              :src="userInfo.avatar ? store.state.imgUrl + userInfo.avatar : logo"
          /> -->
          <div style="border:1px solid #fff"  
           :style="{backgroundImage: `url(${userInfo.avatar ? store.state.imgUrl + userInfo.avatar : logo})`}">
         </div>
          <div style="font-size:16px;color:#fff;">
            {{ userInfo.name }}
            <!--            {{ dataList.name }}-->
          </div>
        </div>
        <div class="nav-btn">
          <!--          v-if="!dataList.isAttention"-->
          <!--          @click="handleLike(dataList.userId)"-->
          <div class="nav-btn-follow" v-if="buttonStatus == 1">
            <van-icon name="plus"/>
            <span>未关注</span>
          </div>
          <!--          v-if="dataList.isAttention"-->
          <div class="nav-btn-followed" v-if="buttonStatus == 2">
            <span>已关注</span>
          </div>
          <!-- <van-button v-if="isfollow" plain  icon="plus" color="#f29600" size="mini">关注</van-button>
          <van-button v-if="isfollow" color="#fff"  plain size="mini" ><span style="color:#000" >已关注</span></van-button> -->
        </div>
      </div>
    </van-sticky>
    <div class="header" ref="user">
      <!-- <div class="avatar" v-if="userInfo.avatar" :style="{backgroundImage: `url(${ userInfo.avatar ? store.state.imgUrl + userInfo.avatar : logo})`}">
      </div> -->
      <!-- <van-image style="border:1px solid #fff"  class="avatar" v-if="userInfo.avatar" round :src="userInfo.avatar ? store.state.imgUrl+ userInfo.avatar : logo" /> -->
       <div class="avatar" style="border:1px solid #fff"  
           :style="{backgroundImage: `url(${userInfo.avatar ? store.state.imgUrl+ userInfo.avatar : logo})`}">
       </div>
      <!-- <img  class="avatar"  v-else :src="logo"/> -->
      <div class="one">
        <div class="add-friend" v-if="buttonStatus == 0" @click="addFriend">
          添加好友
          <div class="add-frient-num" v-if="numberNewFans">{{ numberNewFans }}</div>
        </div>
        <div class="add-friend" v-if="buttonStatus == 1">
          <van-icon name="plus"/>
          <span>未关注</span>
        </div>
        <div class="add-friend ygz" v-if="buttonStatus == 2">
          <span>已关注</span>
        </div>
<!--        <div class="add-friend" v-if="buttonStatus == 2">-->
<!--          私信-->
<!--        </div>-->
      </div>
      <div class="two">
        <span class="name">{{ userInfo.name }}</span>
        <div class="address">
          <span class="sex" v-if="userInfo.sex"><i style="font-size:15px" :class="userInfo.sex ? ( userInfo.sex === '1' ? 'el-icon-male' : 'el-icon-female') : '' " :style="userInfo.sex ? (userInfo.sex === '1' ?'color:#3588e5' : 'color:#ff0099') : ''"></i></span>
          <span class="ip" style="font-size: 17px;">IP属地：{{userInfo.ipProvince ? userInfo.ipProvince : '未知'}}</span>
        </div>
      </div>
      <div class="three">
        <div class="three-item-all">
          <div class="three-item" v-for="(item,index) in threeList" :key="index">
            <div class="num">{{ item.num }}</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="body" ref="comments">
      <van-tabs v-model="active" style="margin: 15px;" @click="chooseTab">
        <van-tab :title="obj.name" v-for="obj in channels" :key="obj.id">
          <!-- 文章列表 -->
          <van-tabs v-model="active1" v-if="obj.name=='收藏'">
            <van-tab :title="obj1.name" v-for="obj1 in channels1" :key="obj1.id">
              <!-- 内容和商品 -->
              <keep-alive>
                <ArticleList :article="obj" :article1="obj1"></ArticleList>
              </keep-alive>
            </van-tab>
          </van-tabs>
          <!-- 文章列表 -->
          <keep-alive>
            <ArticleList :article="obj" v-if="obj.name!=='收藏'" @fatherMethod="queryStatisticalInfo"></ArticleList>
          </keep-alive>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import ArticleList from "../components/articleList";
import {queryStatisticalInfo,getUserInfo} from '@/api/my'
import {mapState} from "vuex";
import store from '../../../store'

export default {
  name: "index",
  components: {
    ArticleList
  },
  data() {
    return {
      store: store,
      user: false,
      numberNewFans: 0, //新增粉丝数
      buttonStatus: 0,//按钮状态 0添加好友 1关注 2私信
      back: require("@/assets/search/back.png"),
      share: require("@/assets/my/share.png"),
      threeList: [
        {num: '', name: '获赞'},
        {num: '', name: '朋友'},
        {num: '', name: '关注'},
        {num: '', name: '粉丝'},
      ],
      active1: 0,
      channels1: [
        {name: '内容', id: 0,},
        {name: '商品', id: 1,},
      ],
      active: 0,
      channels: [
        {name: '动态', id: 0,},
        {name: '私密', id: 1,},
        {name: '收藏', id: 2,},
        {name: '喜欢', id: 3,},
      ],
      logo: require("@/assets/tx.png"),
    }
  },
  async mounted() {
    if (this.$route.query.active) {
      this.active = parseFloat(this.$route.query.active)
      //   console.log('active', this.active)
    }
    // this.userInfo = await this.getUserInfo()
    console.log('userInfo',this.userInfo)
   // this.$store.dispatch('my/setUserInfo', this.userInfo)
    this.queryStatisticalInfo()
    this.handleScrollx()
    window.addEventListener('scroll', this.handleScrollx, true)
  },
  beforeDestroy() {    //在加载时添加了scroll监听，如果不销毁，到下一个页面时，没有主动销毁，会报错'offsetTop' of undefined。因此，需要在页面跳转前销毁此监听
    window.removeEventListener("scroll", this.handleScrollx, true)
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    getUserInfo() {
      // this.$toast.success('进入userInfo接口')
      let data = {
        id: '' //别人访问个人主页的时候 需要填写id
      }
      return new Promise((resolve, reject) => {
        getUserInfo(data).then((res) => {
          // this.$toast.success(`${res.data}`)
          resolve(res.data)
        })
      })
    },
    handleScrollx() {//监听头部导航
      // const navBarTop = this.$refs.user.getBoundingClientRect().top
      if (this.$refs.user.getBoundingClientRect().top <= 45) {
        this.user = true
      } else {
        this.user = false
      }
      const commentSection = this.$refs.comments;
      const rect = commentSection.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;

      if (rect.bottom >= 0 && windowHeight - rect.top > 100) {
        this.commentShow = true
      } else {
        this.commentShow = false
      }
    },
    queryStatisticalInfo() {
      console.log('queryStatisticalInfo',this.userInfo.userId)
      let data = {
        isOneself: 0,
        authorId: this.userInfo.userId
      }
      queryStatisticalInfo(data).then(res => {
        // console.log(res.data)
        this.buttonStatus = res.data.buttonStatus
        this.numberNewFans = res.data.numberNewFans
        this.threeList.forEach((item, index) => {
          switch (item.name) {
            case '获赞':
              item.num = res.data.likes
              break
            case '朋友':
              item.num = res.data.friends
              break
            case '关注':
              item.num = res.data.focuses
              break
            case '粉丝':
              item.num = res.data.newFans
              break
          }
        })
        this.$store.dispatch('my/setUserNum', this.threeList)
      })
    },
    handleBack() {
      this.$router.go(-1);
      // this.$router.push({path:'/my'})
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    chooseTab(val) {
      console.log('000a', val)
      // this.active = index;
    },
    handleShare() {

    },
    addFriend() {
      this.$router.push(
          {
            path: '/addFriend',
            query: {}
          }
      )
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  overflow: auto;
  //padding: 15px;
  //background-image: url("../../assets/my/personal.png");
  background-image: url("../../../assets/my/personal.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #ffffff;

  .nav {
    height: 40px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .back {
      width: 10px;
      height: 16px;
    }

    .share {
      width: 22px;
      height: 22px;
    }
  }

  .navBar {
    height: 40px;
    background: #f29600;
    display: flex;
    padding: 2px 19px;
    align-items: center;
    justify-content: space-between;

    .navBar-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .van-image {
      margin: 0 10px;
    }

    .nav-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;

      .nav-btn-follow {
        background: #fff;
        color: #f29600;
        border: 1px solid #fff;
        padding: 3px;
      }

      .nav-btn-followed {
        background: #f29600;
        color: #fff;
        border: 1px solid #fff;
        padding: 3px;
      }
    }
    .avatar{
        border: 1px solid #ebeef5;
        width: 60px;
        height: 60px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
  }

  .header {
    //margin-top: 38px;
    margin: 20px 15px 0px 15px;
    // height: 159px;
    opacity: 1;
    border-radius: 13px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 10px 20px;

    .avatar {
      background-repeat: no-repeat;
      background-size: 100%;
      position: absolute;
      top: -20px;
      left: 10px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      
      //color: #f0f0f0;
      //opacity: 1;
      //background-color: blue;
      //background: url(https://img.js.design/assets/img/650130386283a11de27f9d72.png#38718863d694ca27a56c171da507ec69);
    }

    .one {
      display: flex;
      justify-content: flex-end;

      .ygz {
        color: rgba(255, 255, 255, 1);
        background: rgba(242, 150, 0, 1);
      }

      .add-friend {
        width: 79px;
        height: 23px;
        opacity: 1;
        border-radius: 11.5px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(242, 150, 0, 1);
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 21.72px;
        color: rgba(242, 150, 0, 1);
        text-align: center;
        vertical-align: top;
        position: relative;

        .add-frient-num {
          position: absolute;
          right: 3px;
          top: -10px;
          font-size: 11px;
          font-weight: 700;
          height: 13px;
          color: rgba(255, 255, 255, 1);
          width: 13px;
          opacity: 1;
          background: rgba(255, 66, 66, 1);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .two {
      display: flex;
      // align-items: center;
      flex-direction: column;
      .name {
        width: 200px;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 28.96px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
      }
      .address{
        display: flex;
        align-items: center;
        .sex{
          display: flex;
          align-items: center;
          justify-content: center;
          background:#ccc6;
          border-radius: 5px;
          height: 20px;
          width: 20px;
          margin-right: 5px;
        }
          .ip {
          // margin-left: 13px;
          background-image: url("../../../assets/my/name_back.png");
          background-size: 100%;
          background-repeat: no-repeat;
          font-size: 17px;
          font-weight: 400;
          width: 130px;
          color: rgba(128, 128, 128, 1);
          text-align: left;
          height: 17px;
          line-height: 13px;
          vertical-align: top;
          
        }
      }
      
    }

    .three {
      padding-top: 33px;
      //height: 75px;
      opacity: 1;
      border-radius: 13px;
      background: rgba(255, 255, 255, 1);

      .three-item-all {
        display: flex;
        align-items: center;
        //height: 75px;

        .three-item {
          padding: 0px 8px;
          //border-right: 1px dashed rgba(128, 128, 128, 1);
          width: calc((100% - 48px) / 4);
          text-align: center;

          .num {
            font-size: 24px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 25.13px;
            color: rgba(48, 48, 48, 1);
            //text-align: left;
            vertical-align: top;
          }

          .name {
            margin-top: 5px;
            font-size: 17px;
            font-weight: 400;
            line-height: 20.27px;
            color: rgba(189, 189, 189, 1);
            vertical-align: top;
          }
        }
      }
    }
  }

  /deep/ .van-tabs__line {
    background: rgba(242, 150, 0, 1);
    width: 23px;
    height: 2px;
  }

  /deep/ .van-nav-bar__content {
    height: 48px;
    // 标题
    .van-nav-bar__title {
      // 不要默认设置最大宽度
      max-width: unset;
      font-size: 14px;
    }
  }

  /deep/ .van-tabs--line .van-tabs__wrap {
    padding-top: 10px;
    height: 44px;
    border-bottom: 0.45px solid #e5e5e5;
  }

  /deep/ .van-tab--active {
  }

  /deep/ .van-tab {
    font-size: 20px;
    font-weight: 500;
    line-height: 28.96px;
    color: rgba(199, 199, 199, 1);
    text-align: center;
  }
}
</style>
